<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <link rel='stylesheet' href='./luckysheet/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='./luckysheet/plugins/plugins.css' />
    <link rel='stylesheet' href='./luckysheet/css/luckysheet.css' />
    <link rel='stylesheet' href='./luckysheet/assets/iconfont/iconfont.css' />
    <script src="./luckysheet/plugins/js/plugin.js"></script>
    <script src="./luckysheet/luckysheet.umd.js"></script>
    <script src="./xlsx.full.min.js"></script>
    <script src="./polyfill.js"></script>
    <script>
        $(function () {
            //Configuration item
            var options = {
                container: 'luckysheet', //luckysheet is the container id
                showinfobar: false,
            }
            luckysheet.create(options)
        });
    </script>
</head>

<body>
    <div id="lucky-mask-demo"
        style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); font-size: 40px;align-items:center;justify-content: center;display: none;">
        Downloading</div>
    <p> 
        <input style="font-size:16px;display: none;" type="file" id="Luckyexcel-demo-file"
            name="Luckyexcel-demo-file" change="demoHandler" />
            <button id="Luckyexcel-select-demo" style="display: none;">预览</button>
            <!-- <select
            style="height: 27px;top: -2px;position: relative;" id="Luckyexcel-select-demo">
            <option value="">select a demo</option>
            <option value="http://192.168.1.182:8180/uploadFile/2020/10/20/1603176815594.xlsx">Money Manager.xlsx
            </option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Activity%20costs%20tracker.xlsx">Activity costs
                tracker.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/House%20cleaning%20checklist.xlsx">House
                cleaning checklist.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Student%20assignment%20planner.xlsx">Student
                assignment planner.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Credit%20card%20tracker.xlsx">Credit card
                tracker.xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Blue%20timesheet.xlsx">Blue timesheet.xlsx
            </option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Student%20calendar%20%28Mon%29.xlsx">Student
                calendar (Mon).xlsx</option>
            <option value="https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx">
                Blue mileage and expense report.xlsx</option>
        </select>  -->
        <!-- <a href="javascript:void(0)" id="Luckyexcel-downlod-file">Download source xlsx file</a>
        <button class="excelexport">下载excel</button> -->
    </p>
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 50px;bottom: 0px;">
    </div>
    <button class="btn">点击</button>
    <script src="luckyexcel.js"></script>
    <!-- <script type="module" src="index.js"></script> -->
    <!-- <script type="module">
            // import {importFile} from './main';
            window.onload = () => {
                let upload = document.getElementById("file");
                upload.addEventListener("change", function(evt){
                    var files = evt.target.files;   
                    importFile(files[0]);
                });
            }
        </script> -->
    <script>
        window.onload = function (){
            console.log(123)
            document.querySelector(".btn").onclick = importJsonData
        }
        
        function importJsonData(arr) {
            console.log(111)
            var data = [
        { "name": "John", "city": "Seattle" },
        { "name": "Mike", "city": "Los Angeles" },
        { "name": "Zach", "city": "New York" }
    ];

            /* 创建worksheet */
            var ws = XLSX.utils.json_to_sheet(data);

            /* 新建空workbook，然后加入worksheet */
            var wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "People");

            /* 生成xlsx文件 */
            // XLSX.writeFile(wb, "sheetjs.xlsx");
            var data = XLSX.utils.sheet_to_html(ws);
            /* 调用数据转换方法将数据格式转换成Luckysheet格式*/
            readFile(data);

        }

        function exportFile(type) {
            let allSheetData = luckysheet.getLuckysheetfile();
            console.log("allSheetData")
            console.log(allSheetData)
            exportExcel(allSheetData, ExcelJS)
            function exportExcel(luckysheet, Excel) { // 参数为luckysheet.getluckysheetfile()获取的对象
                // 1.创建工作簿，可以为工作簿添加属性
                const workbook = new Excel.Workbook()
                // 2.创建表格，第二个参数可以配置创建什么样的工作表
                luckysheet.every(function (table) {
                    if (table.data.length === 0) return true
                    const worksheet = workbook.addWorksheet(table.name)
                    // 3.设置单元格合并,设置单元格边框,设置单元格样式,设置值
                    setStyleAndValue(table.data, worksheet)
                    setMerge(table.config.merge, worksheet)
                    setBorder(table.config.borderInfo, worksheet)
                    return true
                })
                // 4.写入 buffer
                const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
                workbook.xlsx.writeBuffer().then((data => {
                    const blob = new Blob([data], { type: EXCEL_TYPE })
                    saveAs(blob, 'download.xlsx')
                }))
            }}
            
    </script>
</body>

</html>